<template>
	<div>
		<el-form 
		v-loading="loading"
		element-loading-text="正在登录"
		element-loading-spinner="el-icon-loading"
		element-loading-background="rgba(0, 0, 0, 0.8)"
		ref="loginForm" 
		:rules="rules" 
		:model="loginForm" 
		class="loginConttainer"
		>
			<h3 class="loginTitle">系统登录</h3>
		<el-form-item prop="username">
			<el-input auto-complete="false" type="text" v-model="loginForm.username" placeholder="请输入用户名">
				
			</el-input>
		</el-form-item>
		<el-form-item prop="password">
			<el-input auto-complete="false" v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
		</el-form-item>
		<el-form-item prop="code">
			<el-input style="width: 250px; margin-right:5px ;" v-model="loginForm.code" placeholder="点击图片更换验证码" type="text" auto-complete="false">
				
			</el-input>
			<img :src="captchaUrl" @click="updateCaptcha">
		</el-form-item>
		<el-checkbox v-model="checked" class="loginRemember">记住我</el-checkbox>
		<el-button type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
		</el-form>
	</div>
</template>

<script>
	export default{
		name:"Login",
		data(){
			return{
				captchaUrl:'/captcha?time='+new Date(),
				loginForm:{
					username:'admin',
					password:'456',
					code:''
				},
				loading:false,
				checked:true,
				rules:{
					username:[{required:true,message:'请输入用户名',tigger:'blur'}],
					password:[{required:true,message:'请输入密码',tigger:'blur'}],
					code:[{required:true,message:'请输入验证码',tigger:'blur'}]
				}
			}
		},
		methods:{
			submitLogin(){
				this.$refs.loginForm.validate((valid) => {
				  if (valid) {
					this.loading=true
				    this.postRequest('/login',this.loginForm).then(resp=>{
						this.loading=false
						if(resp){
							//存取token
							const tokenStr=resp.object.tokenHead+resp.object.token;
							window.sessionStorage.setItem('tokenStr',tokenStr)
							let path=this.$route.query.redirect
							this.$router.replace((path==='/' || path===undefined)?'/home':path)
						}
					})
				  } else {
				     this.$message.error('请输入完整');
				    return false;
				  }
				});
			},
			updateCaptcha(){
				this.captchaUrl='/captcha?time='+new Date()
			}
		}
		
	}
</script>

<style>
	.loginConttainer{
		border-radius: 15px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 350px;
		padding: 15px 35px 15px 35px;
		background: white;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
	}
	.loginTitle{
		margin: 0 auto 40px auto;
		text-align: center;
	}
	.loginRemember{
		text-align: left;
		margin: 0 0 15px 0;
	}
	.el-form-item__content{
		display: flex;
		align-items: center;
	}
</style>
